<template>
  <div v-loading="loading">
    <!--      @back="$router.push({ path: '/OACenter/visualDesign/demandList' })"-->
    <el-page-header
      @back="$router.back()"
      style="display: inline-block;vertical-align: middle;"
    ></el-page-header>
    <div class="title" style="    display: inline-block; vertical-align: middle;">需求面板详情页面</div>
    <el-button
      type="info"
      size="mini"
      @click="$router.push({ name: 'revealImages' ,query:$route.query})"
      :disabled="$route.query.visionDemandStatusId  < 4"
      icon="el-icon-link"
    >视觉展示</el-button>
    <el-table
      :data="[VisionDemandDetail.visionDemand]"
      :header-cell-style="getRowClass"
      border
      v-if="VisionDemandDetail.visionDemand"
    >
      <el-table-column prop="visionDemandName" label="需求名" width="180px"></el-table-column>
      <el-table-column prop="businessUnit" label="BU" width="100"></el-table-column>
      <el-table-column prop="productCategory" label="产品系列" width="100"></el-table-column>
      <el-table-column prop="productModelNumber" label="型号"></el-table-column>
      <el-table-column prop="visionDemandType" label="需求类型" width="150">
        <template slot-scope="scope">
          <span
            v-if="scope.row.visionDemandType && VisionDemandTypeList.length > 0"
          >{{VisionDemandTypeList.find(item => item.key === scope.row.visionDemandType).value}}</span>
          <div v-if="scope.row.visionDemandType === 2">日均浏览量：{{scope.row.pageViewsPercentage}}</div>
          <div
            v-if="scope.row.visionDemandType === 2"
          >日均转化率：{{(scope.row.unitSessionPercentage * 100).toFixed(2)}}%</div>
        </template>
      </el-table-column>
      <el-table-column prop="createUserName" label="创建人"></el-table-column>
      <el-table-column prop="deliveryTime" label="发货时间" width="100px">
        <template slot-scope="scope">{{scope.row.deliveryTime | formatDate}}</template>
      </el-table-column>
      <el-table-column prop="createTime" label="提出时间" width="100px">
        <template slot-scope="scope">{{scope.row.createTime | formatDate}}</template>
      </el-table-column>
      <el-table-column prop="predictResultImgTotal" label="预测张数" width="80"></el-table-column>
      <el-table-column prop="actualResultImgTotal" label="实际张数" width="80"></el-table-column>
      <el-table-column prop="updateUserName" label="修改人"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间" width="160px">
        <template slot-scope="scope">{{scope.row.updateTime | formatDateHMS}}</template>
      </el-table-column>
      <el-table-column prop="updateNumber" label="修改次数">
        <template slot-scope="scope">{{scope.row.updateNumber?scope.row.updateNumber:"0"}}</template>
      </el-table-column>
      <el-table-column prop="visionDemandDominantType" label="主导类型">
        <template slot-scope="scope">{{scope.row.visionDemandDominantType === 1? '需求方主导':"设计方主导"}}</template>
      </el-table-column>
      <el-table-column prop="statusName" label="状态">
        <template slot-scope="scope">{{scope.row.statusName}}</template>
      </el-table-column>
      <el-table-column prop="address" label="开始结束时间" width="180px">
        <template slot-scope="scope">
          <span
            :style="scope.row | formatDateColor"
          >{{scope.row.startTime | formatDate}}-{{scope.row.endTime | formatDate}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-if="VisionDemandDetail.visionDemand && VisionDemandDetail.visionDemand.visionDemandType === 4"
      :data="[VisionDemandDetail.visionDemand.visionDemandVideoInfoVO]"
      :header-cell-style="getRowClass"
      border
    >
      <el-table-column prop="videoSize" label="视频大小M"></el-table-column>
      <el-table-column prop="videoFormat" label="视频格式"></el-table-column>
      <el-table-column prop="videoProportion" label="视频比例"></el-table-column>
      <el-table-column prop="videoResolution" label="视频分辨率"></el-table-column>
      <el-table-column prop="videoTime" label="视频时长s"></el-table-column>
      <el-table-column prop="videoUsage" label="视频用途"></el-table-column>
    </el-table>
    <template
      v-if="VisionDemandDetail.visionDemand && VisionDemandDetail.visionDemand.visionDemandType === 4 && VisionDemandDetail.visionDemand.visionDemandVideoInfoVO"
    >
      <div class="title">视频其他信息</div>
      <div
        class="meetInfo"
        v-html="VisionDemandDetail.visionDemand.visionDemandVideoInfoVO.videoInfo"
      ></div>
    </template>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="title">负责设计师</div>
        <el-table
          :data="VisionDemandDetail.visionDemandUserRelVOList"
          :header-cell-style="getRowClass"
          border
        >
          <el-table-column prop="userDisplayName" label="名称" width="100px"></el-table-column>
          <el-table-column prop="startTime" label="开始结束时间" width="180px">
            <template
              slot-scope="scope"
            >{{scope.row.startTime | formatDate}}-{{scope.row.endTime | formatDate}}</template>
          </el-table-column>
          <el-table-column prop="isHelper" label="是否需要协助">
            <template
              slot-scope="scope"
            >{{scope.row.isHelper == '0' ?'独立完成':"需要协助"}}：{{scope.row.helperContent}}</template>
          </el-table-column>
          <el-table-column prop="status" label="任务状态" width="90px">
            <template slot-scope="scope">{{scope.row.status | getPrincipal}}</template>
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="150px">
            <template slot-scope="scope">{{scope.row.updateTime | formatDateHMS}}</template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <div class="title">审核人员</div>
        <el-table
          :data="VisionDemandDetail.visionDemandCheckRelVOList"
          :header-cell-style="getRowClass"
          border
        >
          <el-table-column prop="userName" label="名字" width="120"></el-table-column>
          <el-table-column prop="checkStatus" label="申请状态" width="100">
            <template slot-scope="scope">{{scope.row.checkStatus | getReviewerStatus}}</template>
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="150">
            <template slot-scope="scope">{{scope.row.updateTime | formatDateHMS}}</template>
          </el-table-column>
          <el-table-column prop="denialCount" label="拒绝次数" width="80"></el-table-column>
          <el-table-column prop="denialReason" label="拒绝原因">
            <template slot-scope="scope">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in JSON.parse(scope.row.denialReason )"
                  :key="index"
                  :timestamp="activity.timestamp"
                >{{activity.content}}</el-timeline-item>
              </el-timeline>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="title">会议记录</div>
    <template v-if="VisionDemandDetail.visionDemand">
      <div class="meetInfo" v-html="VisionDemandDetail.visionDemand.meetInfo"></div>
    </template>
    <template v-if="$route.query.visionDemandDominantType == 2">
      <div class="title">参考竞品信息</div>
      <el-row :gutter="20">
        <el-col :span="24" v-if="VisionDemandDetail.visionDemand">
          <el-table
            :data="JSON.parse(VisionDemandDetail.visionDemand.productIntroduction)"
            :header-cell-style="getRowClass"
            border
          >
            <el-table-column prop="key" label="产品名称" width="200"></el-table-column>
            <el-table-column prop="value" label="产品介绍">
              <template slot-scope="scope">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 1, maxRows: 100}"
                  placeholder="请输入内容"
                  v-model="scope.row.value"
                  disabled
                  class="textarea-input-wrrap"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24">
          <el-table
            :data="VisionDemandDetail.visionDemandReferenceVOList"
            :header-cell-style="getRowClass"
            border
          >
            <el-table-column prop="date" label="参考链接">
              <template slot-scope="scope">
                <p v-for="(item,index) in  JSON.parse(scope.row.referenceUrl)" :key="index">
                  <el-link :href="item.url" target="_blank">{{item.url}}</el-link>
                </p>
              </template>
            </el-table-column>
            <el-table-column prop="note" label="备注"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </template>
    <template
      v-else-if="((VisionDemandDetail.visionDemandReferenceImgVOList && VisionDemandDetail.visionDemandReferenceImgVOList.length) > 0 || VisionDemandDetail.visionDemandEbcTemplateRelVOList > 0)  || $route.query.visionDemandType != 4 "
    >
      <div class="title">
        图片信息
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-download"
          @click="download('visionDemandReferenceImgVOList')"
        >下载</el-button>
      </div>
      <el-row
        :gutter="20"
        v-for="(item,index) in VisionDemandDetail.visionDemandReferenceImgVOList"
        :key="index"
      >
        <el-col>
          <div class="grid-content bg-purple">
            <template v-for="(referenceImgUrl,i) in JSON.parse(item.referenceImgUrl)">
              <img style="width: 120px; height: 120px; margin: 0 5px 5px 0; vertical-align: top;"
                v-if="RegExp('.(' + imgType.join('|') + ')$', 'i').test(referenceImgUrl.name.toLowerCase())"
                :src="referenceImgUrl.url"
                 @click="handlePictureCardPreview(JSON.parse(item.referenceImgUrl),referenceImgUrl,i)"
                :key="i">
              <video
                style="
                  width: 120px;
                  height: 120px;
                  display: inline-block;
                  background: #000;
                  vertical-align: top;
                  margin: 0px 5px 5px 0px;"
                :src="referenceImgUrl.url"
                v-else
                :key="i"
                @click="dialogVisible = true,dialogImageUrl = referenceImgUrl"
              ></video>
            </template>
            <div v-if="item.note">
              <p class="note">
                <span>备注</span>
                ：
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 1, maxRows: 100}"
                  placeholder="请输入内容"
                  v-model="item.note"
                  disabled
                  class="textarea-input-wrrap"
                ></el-input>
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="title">
        EBC页面信息
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-download"
          @click="download('visionDemandEbcTemplateRelVOList')"
        >下载</el-button>
      </div>
      <el-row
        :gutter="20"
        v-for="(item,index) in VisionDemandDetail.visionDemandEbcTemplateRelVOList"
        :key="index + 'visionDemandEbcTemplateRelVOList'"
      >
        <el-col>
          <div class="grid-content bg-purple">
            <template v-for="(itemEbc,idxEbc) in EbcPageTemplateList">
              <div
                :key="idxEbc + 'Ebc'"
                v-if="itemEbc.ebcPageTemplateId === item.ebcPageTemplateId"
              >
                <div style="margin-bottom:5px">
                  <p class="note">
                    <span>模板：{{itemEbc.ebcTemplateName}} {{itemEbc.imgSize}}</span>
                  </p>
                </div>
                <el-image
                  style="width: 300px;  margin: 0 5px 5px 0;  vertical-align: top;"
                  :src=" itemEbc.ebcTemplateImgUrl"
                  fit="cover"
                  lazy
                  :preview-src-list="[ itemEbc.ebcTemplateImgUrl]"
                ></el-image>
              </div>
            </template>

            <div style="margin-bottom:5px">
              <p class="note">
                <span>图片：</span>
              </p>
            </div>
            <template v-for="(ReferenceImg,i) in JSON.parse(item.ebcTemplateReferenceImgUrl)">
              <img  style="width: 120px; height: 120px; margin: 0 5px 5px 0;  vertical-align: top;"
                v-if="RegExp('.(' + imgType.join('|') + ')$', 'i').test(ReferenceImg.name.toLowerCase())"
                :src="ReferenceImg.url"
                @click="handlePictureCardPreview(JSON.parse(item.ebcTemplateReferenceImgUrl),ReferenceImg,i)"
                :key="i">
              <video
                style="
                                 width: 120px;
                                height: 120px;
                                display: inline-block;
                                background: #000;
                                vertical-align: top;
                                margin: 0px 5px 5px 0px;"
                :src="ReferenceImg.url"
                v-else
                :key="i"
                @click="dialogVisible = true,dialogImageUrl = ReferenceImg"
              ></video>
            </template>
            <div v-if="item.note">
              <p class="note">
                <span>备注</span>
                ：
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 1, maxRows: 100}"
                  placeholder="请输入内容"
                  v-model="item.note"
                  disabled
                  class="textarea-input-wrrap"
                ></el-input>
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
    </template>
    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="imgArrayViewer" />
    <el-dialog :visible.sync="dialogVisible">
      <video
        :src="dialogImageUrl.url"
        autoplay="autoplay"
        controls="controls"
        width="100%"
        style="max-height:500px"
      ></video>
    </el-dialog>
  </div>
</template>
<script>
import { formatDate } from "assets/js/date";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
const ERR_OK = 200;
let that;
export default {
  components: {
    ElImageViewer,
  },
  data() {
    that = this;
    return {
      showViewer: false,
      imgArrayViewer: [],
      VisionDemandDetail: {},
      loading: true,
      tableData: [],
      imgType: ["jpg", "png", "gif"],
      dialogVisible: false,
      dialogImageUrl: {},
      EbcPageTemplateList: [],
      VisionDemandTypeList: [],
    };
  },
  filters: {
    formatDateColor({ endTime }) {
      let visionDemandCheckRelList =
        that.VisionDemandDetail.visionDemandCheckRelVOList;
      if (
        visionDemandCheckRelList &&
        visionDemandCheckRelList.find((item) => item.updateTime)
      ) {
        var flag = true;
        for (let i in visionDemandCheckRelList) {
          let item = visionDemandCheckRelList[i];
          if (!item.updateTime) continue;
          if (
            new Date(
              formatDate(new Date(item.updateTime), "yyyy-MM-dd")
            ).valueOf() <=
            new Date(formatDate(new Date(endTime), "yyyy-MM-dd")).valueOf()
          ) {
            flag = false;
            return "";
          }
        }
        if (flag) {
          return "color: rgb(255, 17, 0);";
        }
      }
    },
    formatDate(time) {
      if (time) {
        var date = new Date(time);
        return formatDate(date, "yyyy-MM-dd");
      }
    },
    formatDateHMS(time) {
      if (time) {
        var date = new Date(time);
        return formatDate(date, "yyyy-MM-dd hh:mm:ss");
      }
    },
    getPrincipal(key) {
      switch (key) {
        case 0:
          return "待领取任务";
          break;
        case 1:
          return "已领取任务";
          break;
        case 2:
          return "进行中";
          break;
        case 3:
          return "已完成任务";
          break;
        default:
          return key;
          break;
      }
    },
    getReviewerStatus(key) {
      switch (key) {
        case -1:
          return "未通过审核";
          break;
        case 0:
          return "待审核";
          break;
        case 1:
          return "通过审核";
          break;
      }
    },
  },
  created() {
    if (!this.$route.query.visionDemandId) {
      this.$router.push({ path: "/OACenter/visualDesign/demandList" });
    } else {
      this.getVisionDemandTypeList();
      this.getEbcPageTemplateList();
      this.getDetails();
    }
  },
  methods: {
    getDetails() {
      this.loading = true;
      this.$ajax
        .get(
          this.GLOBAL.oaVisionDemand +
            "/visionDemand/getVisionDemandDetailedById?visionDemandId=" +
            this.$route.query.visionDemandId
        )
        .then((res) => {
          this.loading = false;
          if (res.data.code === ERR_OK) {
            this.VisionDemandDetail = res.data.data;
          }
        });
    },
    //获取视觉需求类型列表
    getVisionDemandTypeList() {
      this.$ajax
        .get(
          this.GLOBAL.oaVisionDemand +
            "/visionDemandBasicInfo/getVisionDemandTypeList"
        )
        .then((res) => {
          if (res.data.code === ERR_OK) {
            this.VisionDemandTypeList = res.data.data;
          }
        });
    },
    // 获取EBC模板列表
    getEbcPageTemplateList() {
      this.$ajax
        .get(
          this.GLOBAL.oaVisionDemand +
            "/visionDemandEbcTemplate/getEbcTemplateList"
        )
        .then((res) => {
          if (res.data.code === ERR_OK) {
            this.EbcPageTemplateList = res.data.data;
          }
        });
    },
    // 标题背景颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #EBEEF5 ";
      } else {
        return "";
      }
    },
    closeViewer() {
      this.showViewer = false;
    },
    handlePictureCardPreview(imgArrays,file, index) {
      this.showViewer = true;
      let arr = [];
      let i = 0;
      const imgArray = imgArrays
      for (i; i < imgArray.length; i++) {
        if (
          RegExp(".(" + this.imgType.join("|") + ")$", "i").test(
            imgArray[i + index].name.toLowerCase()
          )
        ) {
          arr.push(imgArray[i + index].url);
        }
        if (i + index >= imgArray.length - 1) {
          index = 0 - (i + 1);
        }
      }
      console.log(arr);
      this.imgArrayViewer = arr;
    },
    //下载
    download(id) {
      const tHeader = ["备注", "图片"];
      const filterVal = ["note"];
      const tableData = [];
      const filteName = {};
      this.VisionDemandDetail[id].forEach((item) => {
        const itemImage = {};
        JSON.parse(
          item[
            id === "visionDemandEbcTemplateRelVOList"
              ? "ebcTemplateReferenceImgUrl"
              : "referenceImgUrl"
          ]
        ).forEach((el, index) => {
          itemImage["index" + index] = el.url;
          if (!filteName["index" + index]) {
            filterVal.push("index" + index);
            filteName["index" + index] = "index" + index;
          }
        });
        tableData.push({
          note: item.note,
          ...itemImage,
        });
      });
      this.export2Excel(tHeader, filterVal, tableData, id);
    },
    export2Excel(Header, filter, tableData, id) {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("./export2Excel"); //这里必须使用绝对路径
        const tHeader = Header; // 导出的表头名
        const filterVal = filter; // 导出的表头字段名
        const list = tableData;
        const data = that.formatJson(filterVal, list);
        export_json_to_excel(
          tHeader,
          data,
          that.VisionDemandDetail.visionDemand["visionDemandName"] +
            (id === "visionDemandEbcTemplateRelVOList"
              ? "EBC页面信息"
              : "图片信息") +
            formatDate(new Date(), "yyyy-MM-dd hh_mm")
        );
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
};
</script>
<style lang="stylus" scoped>
.title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  padding: 8px 0;
}

.meetInfo {
  padding: 15px;
  font-size: 14px;
  color: #333333;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
}

.el-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  vertical-align: top;
  margin-bottom: 10px;
}

.bg-purple {
  background: #d3dce6;
  padding: 10px;
  height: 100%;
  box-sizing: border-box;
  border-radius: 5px;

  .note {
    width: 80%;
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
    color: #666666;
    background: #ffffff;

    span {
      font-weight: bold;
      color: #000;
    }
  }
}

.el-timeline {
  overflow: auto;
  max-height: 150px;
}
</style>
<style lang="stylus">
.textarea-input-wrrap.el-textarea.is-disabled {
  .el-textarea__inner {
    color: #333333;
    background: none;
    border: none;
    cursor: auto;
  }
}
</style>
